<template>
  	<f7-page class="peopleDetail">
		<f7-navbar  back-link="Back">
			<!-- <f7-nav-left>
				<f7-link href="javascript:;"  @click="go('/index/')"><f7-icon icon="icon-back" ></f7-icon></f7-link>
			</f7-nav-left> -->
			<f7-nav-title>
				{{detailOld.oldName}}
			</f7-nav-title>
			<f7-nav-right>
				<a class="link popover-open" href="#" data-popover=".popover-links10"><i class="icon f7-icons">menu</i></a>
			</f7-nav-right>
			<div class="popover popover-links10">
				<div class="popover-inner">
					<div class="list">
						<ul>
							<li v-for="(val,key) in secondNav" :key="key"><a class="list-button item-link popover-close" href="javascript:;" @click="go(val.url)">{{val.name}}</a></li>
						</ul>
					</div>
				</div>
			</div>
		</f7-navbar>
		<!-- 卡片 -->
		<f7-card>
			<f7-card-content>
				<div class="row">
					<div class="col-20 borderR">
						<f7-badge color="orange" style="writing-mode: tb-rl;-webkit-writing-mode: vertical-rl;writing-mode: vertical-rl;word-spacing:8px;letter-spacing: 5px;padding: 6px 4px 0 4px;">{{detailOld.nursinglevel}}</f7-badge>
					</div>
					<div class="col-auto" style="padding-left: 10px;padding-right:5px;">
						<p><span>房间</span> {{detailOld.roomName}}</p>
						<p><span>老人</span> {{detailOld.oldName}}</p>
					</div>
					<div class="col-50">
						<p><span>床位</span> {{detailOld.bedName}}</p>
						<p><span>年龄</span> {{detailOld.age}} <span class="marginL15">性别 </span><label v-if="detailOld.sex==0">女</label><label v-if="detailOld.sex==1">男</label></p>
					</div>
				</div>
				<f7-block class="margin10_0_5_45 borderT" v-if="detailOld.outside.state==1">
					<p class="color_007aff">{{detailOld.outside.reson}}</p>
					<p class="color_007aff">{{detailOld.outside.outtime+" 外出"}}</p>
				</f7-block>
				<f7-badge class="absoult" color="red" v-if="detailOld.outside.state==1">外</f7-badge>
			</f7-card-content>
		</f7-card>
		<!-- 大小便 -->					
		<div class="row no-gap marginT10 bg_FFF">
			<div class="col-50 borderR_f1f1f1 big">
				<div class="block-inline">
					<h6>大便</h6>
					<span v-if="detailOld.lastShitTime">{{detailOld.lastShitTime}}</span>
					<span v-else>--</span>
					<f7-button class="col-50" small round fill color="green" @click="go('/big_form/1/'+detailOld.id+'/')">添加</f7-button>
				</div>
			</div>
			<div class="col-50 small_">
				<div class="block-inline">
					<h6>小便</h6>
					<span v-if="detailOld.lastPeeTime">{{detailOld.lastPeeTime}}</span>
					<span v-else>--</span>
					<f7-button class="col-50" small round fill color="green" @click="go('/big_form/0/'+detailOld.id+'/')">添加</f7-button>
				</div>
			</div>
			<div class="col-100 borderT_f1f1f1 marginT10 watchMore" @click="go('/timeLine/'+detailOld.id+'/两便历史/')">
				点击查看历史记录
			</div>
		</div>
		<!-- 护理列表 -->
		<f7-list class="marginT10 bg_FFF marginB10px">
			<f7-list-item title="翻身">
				<span class="color_ccc"  @click="go('/timeLine/'+detailOld.id+'/翻身历史/')">上次:<span v-if="detailOld.rollTime">{{detailOld.rollTime}}</span>
					<span v-else>--</span></span>
				<f7-nav-right>
					<f7-button class="col-50" small round fill color="green" @click="go('/rollOver_form/'+detailOld.id+'/')">添加</f7-button>
				</f7-nav-right>
			</f7-list-item>
			<f7-list-item v-for="(val,key) in fuwuList" :key="key" link="#" @click="go('/fuwu/'+val.resCaseName+'/'+detailOld.id+'/'+val.resCaseId+'/'+detailOld.oldName+'/')" :title="val.resCaseName">
				<span class="color_ccc">上次:<span v-if="val.checkTime">{{val.checkTime}}</span>
					<span v-else>--</span> 月计:<span v-if="val.num">{{val.num}}</span>
					<span v-else>--</span>次</span>
			</f7-list-item>
		</f7-list>
  	</f7-page>
</template>

<script>
export default {
	name: 'about',
	created(){
		console.log(this.detailOld)
		this.detailOld.outside={};
		this.detailOld.outside.state=0;
	},
	data () {
		return {
			page_params:this.$f7route.params,
			detailOld:{},
			fuwuList:[],
			secondNav:[],
		}
	},
	mounted () {
		var that = this;
		//获取老人详情
		that.$post(global.COURSES.path + '/oldman/findById', {'id':that.page_params.oldId})
			.then(message => {
				if(message.code==0){
					console.log(message.data)
					that.detailOld = JSON.parse(message.data);
					that.detailOld.roomName = that.detailOld.bedName.substring(0,5);//加入房间号
					that.detailOld.lastPeeTime = that.detailOld.lastPeeTime.substring(5,16);
					that.detailOld.lastShitTime = that.detailOld.lastShitTime.substring(5,16);
					that.detailOld.rollTime = that.detailOld.rollTime.substring(5,16);
					console.log(that.detailOld)
					that.detailOld.outside.state = 1
					if(that.detailOld.outside.outtime){
						that.detailOld.outside.state = 1
					}else{
						that.detailOld.outside.state = 0
					}
					//TODO 拼项目服务的次数以及时间
					that.fuwuList = that.detailOld.resCase;
					var todoFuWu = that.detailOld.resMemo[0];
					for(var key in todoFuWu){
						that.fuwuList.forEach(element => {
							if(key == element.resCaseName){
								element.checkTime=todoFuWu[key].checkTime.substring(5,16);
								element.num=todoFuWu[key].num;
							}
						});
					}
					that.secondNav = [
						{
							url:'/specialFood_form/'+that.page_params.oldId+'/'+that.detailOld.oldName+'/',
							name:'特殊饮食',
						},
						{
							url:'/visited_form/'+that.page_params.oldId+'/'+that.detailOld.oldName+'/',
							name:'探视来访',
						},
						{
							url:'/outPlace_form/'+that.page_params.oldId+'/'+that.detailOld.oldName+'/',
							name:'协议外出',
						},
						{
							url:'/oldTime_form/'+that.page_params.oldId+'/'+that.detailOld.oldName+'/',
							name:'晚年时光',
						},
						{
							url:'/personal_form/'+that.page_params.oldId+'/',
							name:'个人物品',
						},
						{
							url:'/speak_form/'+that.page_params.oldId+'/'+that.detailOld.oldName+'/',
							name:'语言沟通（语音）',
						},
						{
							url:'/speak_form2/'+that.page_params.oldId+'/'+that.detailOld.oldName+'/',
							name:'语言沟通（视频）',
						}
					]
				}else{
					that.go('/index/');
				}
					
			})

	},
	methods: {
		go: function(path){
			this.$f7.popover.close();
			this.$f7.views.main.router.navigate(path);
		},
	}
}
</script>
<style scoped>
	.peopleDetail .badge{
		font-size: 16px;
	}
	.peopleDetail{
		background-color: #ccc!important;
	}
	.peopleDetail p{
		margin: 1px 0;
		font-size: 16px;
	}
	.peopleDetail p span{
		color: #ccc;
	}
	.color_ccc{
		color: #ccc;
	}
	.peopleDetail h6{
		font-size: 18px;
		font-weight: 400;
		margin: 10px 0 3px 0;
	}
	.peopleDetail .item-media img{
		width: 30px;
	}
	.peopleDetail .item-inner{
		margin-left: 0!important;
	}
	.marginL15{
		margin-left: 15px;
	}
	.borderR{
		border-right: 1px solid #CCCCCC;
	}
	.borderR_f1f1f1{
		border-right: 1px solid #f1f1f1;
	}
	.margin10_0_5_45{
		margin: 7px 0 5px 50px!important;
	}
	.peopleDetail .block-inline{
		display:inline-block;
		width: 50%;
		margin-left: 45%;
	}
	.peopleDetail .big{
		background: url(../../static/img/mipmap-hdpi/icon_shit.png) no-repeat 20px 10px;
	}
	.peopleDetail .small_{
		background: url(../../static/img/mipmap-hdpi/icon_pee.png) no-repeat 20px 10px;
	}
	.peopleDetail .borderT{
		border-top: 1px solid #CCCCCC;
	}
	.peopleDetail .borderT_f1f1f1{
		border-top: 1px solid #f1f1f1;
	}
	.peopleDetail .color_007aff{
		color:#007aff;
	}
	.peopleDetail .marginT10{
		margin-top: 10px!important;
	}
	.peopleDetail .watchMore{
		text-align: center;
		line-height: 40px;
		font-size: 16px;
	}
	.peopleDetail .ios .list, .ios .block{
		margin: 0;
	}
	.absoult{
		position: absolute;
		top: 10px;
		right: 10px;
	}
	.marginB10px{
		margin-bottom: 10px;
	}
	.popover{
		width: 160px;
	}
</style>